<template>
    <el-select
    class="width_100"
      placeholder="请选择"
      v-model="selectValue"
      filterable
      collapse-tags
      collapse-tags-tooltip
      :clearable="clearable"
      :filter-method="handleQuerySearch"
      @change="handleQueryChange"
      @visible-change="visibleChange"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <VabElSelectLoading
        :page="page"
        :loading="loading"
        :hasMore="hasMore"
        @loadMore="handleLoadMore"
      />
    </el-select>
  </template>
  <!--
    可以通过此接口获取
    产品名称
    产品编码
    产品条码
   -->
<script setup lang="ts">
/**
 * @import
 */
import { ref } from 'vue'
import { getProductSearchSelect } from '~/src/api/dms/product'
import _ from 'lodash';

/**
 * @props
 */
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '', // number, name, assistant_id, barcode
  },
  // 使用组织
  userOrgId: {
    type: String,
    default: '',
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy
const page = ref(0)
const loading = ref(false)
const hasMore = ref(true)

const selectValue = ref<any>()
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([])

const emit = defineEmits(['LazyChange'])

/**
 * 加载数据列表
 */

const loadDataList = _.debounce(async () => {
  // if (!props.userOrgId) {
  //     proxy.$Message('请选择使用组织，再进行操作！', 'warning')
  //     return
  // }
  try {
    loading.value = true

    // 参数
    let data = {
      page: page.value,
      limit: 10,
      filter: {
        name: (props.type == '' || props.type == 'name') ? sreachValue.value : '', // 物料名称
        number: props.type == 'number' ? sreachValue.value : '', // 物料编码
        barcode: props.type == 'barcode' ? sreachValue.value : '', // 条码
        use_org_id: props.userOrgId || '', // 使用组织
      },
    }

    // api
    const res = await getProductSearchSelect({ ...data })

    // 遍历获取
    const list = res.data.list.map((item: any) => {
      // 复合查询
      if (!props.type) return { ...item, value: item.number, label: `${item.number}-${item.name}` }
      if (props.type == 'name') return { ...item, value: item.name, label: item.name }
      if (props.type == 'number') return { ...item, value: item.number, label: item.number }
      if (props.type == 'barcode') return { ...item, value: item.barcode, label: item.barcode }
    }) || []

    if (page.value == 1) selectOptions.value = []

    // 添加新的数据
    selectOptions.value.push(...list)

    // 是否进行加载数据
    hasMore.value = selectOptions.value.length < res.data.count

  } catch (err) {
    console.error(err)
  } finally {
    loading.value = false
  }
}, 500)



/**
 * 加载更多数据
 */

const handleLoadMore = _.throttle(async (value: any) => {
  // if (!props.userOrgId) return
  page.value = await value
  loadDataList()
}, 500)

/**
 * 模糊搜索
 */
const handleQuerySearch = _.throttle((value: any) => {
  // if (!props.userOrgId) return
  // 去空格 大小写
  sreachValue.value = value?.trim().toLowerCase()
  page.value = 1
  // 加载数据
  loadDataList()
}, 500)


const visibleChange = (lay: boolean) => {
  // if (!lay) return
  // if (!props.userOrgId) {
  //     proxy.$Message('请选择使用组织，再进行操作！', 'warning')
  //     return
  // }
}

/**
 * change
 */
const handleQueryChange = (value: any) => {
  let row = []
  row = selectOptions.value.filter((item: any) => {
    if (props.type == 'number' && item.number == value) return item
    if (props.type == 'name' && item.name == value) return item
    if (props.type == 'barcode' && item.barcode == value) return item
    if (!props.type && item.number == value) return item
  })
  emit('LazyChange', { value, row: row[0] })
}

/**
 * @实例
 */

watch(
  () => props.value,
  (newValue, oldValue) => {
    selectValue.value = newValue
  },
  { deep: true, immediate: true }
)

defineExpose({
})
</script>

<style lang="scss" scoped></style>
